import React, { Component } from 'react';
import { Modal, Animated, StatusBar, StyleSheet, ScrollView, Text, TextInput, View, Image, TouchableOpacity, TouchableHighlight } from 'react-native';

class FadeInView extends React.Component {
    state = {
        fadeAnim: new Animated.Value(0),  // 透明度初始值设为0
    }

    componentDidMount() {
        Animated.timing(                  // 随时间变化而执行动画
            this.state.fadeAnim,            // 动画中的变量值
            {
                toValue: 1,                   // 透明度最终变为1，即完全不透明
                duration: 2000,              // 让动画持续一段时间
            }
        ).start();                        // 开始执行动画
    }

    render() {
        let { fadeAnim } = this.state;

        return (
            <Animated.View                 // 使用专门的可动画化的View组件
                style={{
                    ...this.props.style,
                    opacity: fadeAnim,         // 将透明度指定为动画变量值
                }}
            >
                {this.props.children}
            </Animated.View>
        );
    }
}

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = { modalVisible: false };
    }
    setModalVisible(visible) {
        this.setState({ modalVisible: visible });
    }
    render() {
        return (

            <ScrollView>
                <StatusBar backgroundColor={'#f892ac'}
                    barStyle={'light-content'}
                />
                <View>

                    <Modal style={[styles.modelStyle, { backgroundColor: 'rgba(25,25,25,0.5)' }]}
                        visible={this.state.modalVisible}
                        animationType={"slide"}
                        transparent={false}
                        onRequestClose={() => { alert("Modal has been closed.") }}
                    >
                        <View style={{ marginTop: 180 }}>
                            <View style={{ flexDirection: 'column', alignItems: 'center',justifyContent: 'center'}}>
                                <View style={styles.int}>
                                    <Text style={{fontSize: 16 ,marginTop:30}}>登陆/注册</Text>
                                    <View style={{ flex: 1, marginTop: 30 , flexDirection: 'column', alignItems: 'center',justifyContent: 'center'}}>
                                        <TextInput
                                            style={styles.input} placeholder={'输入账号'}
                                            placeholderTextColor={'#e3e3e3'}
                                            editable={true} mutiline={true} maxLength={5}
                                            keyboardType={'number-pad'}>
                                        </TextInput>

                                        <TextInput
                                            style={styles.input} placeholder={'输入密码'}
                                            placeholderTextColor={'#e3e3e3'}
                                            editable={true} mutiline={true} maxLength={5}
                                            keyboardType={'number-pad'}>
                                        </TextInput>

                                        <TouchableOpacity style={styles.btn}>
                                            <Text style={{ color: 'white' }}>登陆/注册</Text>
                                        </TouchableOpacity>
                                    </View>
                                </View>

                                <TouchableHighlight onPress={() => {
                                    this.setModalVisible(false)
                                }}>
                                    <Image source={{ uri: 'close' }} style={{ width: 50, height: 50, marginTop: 100 }}></Image>
                                </TouchableHighlight>

                            </View>
                        </View>
                    </Modal>
                </View>

                <View style={styles.container}>
                    <View style={styles.header}>
                        <Text style={{ color: 'white', fontSize: 17, fontWeight: '500' }}>Talk To</Text>
                    </View>



                    <TouchableOpacity style={styles.intStyle} onPress={() => {
                        this.setModalVisible(true)
                    }}>
                        <Text style={{ marginLeft: 10 }}>登陆/注册</Text>
                        <Image source={{ uri: 'home_arrow' }} style={{ width: 10, height: 15, marginRight: 15 }}></Image>
                    </TouchableOpacity>
                    <FadeInView>
                        <View style={{ marginTop: 10 }}>
                            <View style={styles.bottom1}>
                                <TouchableOpacity style={styles.itemStyle}>
                                    <View style={styles.imgT}>
                                        <Image source={{ uri: 'bank' }} style={{ width: 20, height: 20, marginTop: 3 }}></Image>
                                        <Text style={{ marginLeft: 10, fontSize: 18, fontWeight: '300' }}>秘密</Text>
                                    </View>
                                    <Image source={{ uri: 'home_arrow' }} style={{ width: 10, height: 15, marginRight: 15 }}></Image>
                                </TouchableOpacity>

                                <TouchableOpacity style={styles.itemStyle}>
                                    <View style={styles.imgT}>
                                        <Image source={{ uri: 'folder' }} style={{ width: 20, height: 20, marginTop: 3 }}></Image>
                                        <Text style={{ marginLeft: 10, fontSize: 18, fontWeight: '300' }}>我的</Text>
                                    </View>
                                    <Image source={{ uri: 'home_arrow' }} style={{ width: 10, height: 15, marginRight: 15 }}></Image>
                                </TouchableOpacity>
                            </View>

                            <View style={styles.bottom2}>
                                <TouchableOpacity style={styles.itemStyle}>
                                    <View style={styles.imgT}>
                                        <Image source={{ uri: 'test' }} style={{ width: 20, height: 20, marginTop: 3 }}></Image>
                                        <Text style={{ marginLeft: 10, fontSize: 18, fontWeight: '300' }}>收藏列表</Text>
                                    </View>
                                    <Image source={{ uri: 'home_arrow' }} style={{ width: 10, height: 15, marginRight: 15 }}></Image>
                                </TouchableOpacity>
                                <TouchableOpacity style={styles.itemStyle}>
                                    <View style={styles.imgT}>
                                        <Image source={{ uri: 'conversation' }} style={{ width: 20, height: 20, marginTop: 3 }}></Image>
                                        <Text style={{ marginLeft: 10, fontSize: 18, fontWeight: '300' }}>我的评价</Text>
                                    </View>
                                    <Image source={{ uri: 'home_arrow' }} style={{ width: 10, height: 15, marginRight: 15 }}></Image>
                                </TouchableOpacity>
                               
                                <TouchableOpacity style={styles.itemStyle}>
                                    <View style={styles.imgT}>
                                        <Image source={{ uri: 'shield' }} style={{ width: 20, height: 20, marginTop: 3 }}></Image>
                                        <Text style={{ marginLeft: 10, fontSize: 18, fontWeight: '300' }}>安全</Text>
                                    </View>
                                    <Image source={{ uri: 'home_arrow' }} style={{ width: 10, height: 15, marginRight: 15 }}></Image>
                                </TouchableOpacity>
                                <TouchableOpacity style={styles.itemStyle}>
                                    <View style={styles.imgT}>
                                        <Image source={{ uri: 'setup' }} style={{ width: 20, height: 20, marginTop: 3 }}></Image>
                                        <Text style={{ marginLeft: 10, fontSize: 18, fontWeight: '300' }}>设置</Text>
                                    </View>
                                    <Image source={{ uri: 'home_arrow' }} style={{ width: 10, height: 15, marginRight: 15 }}></Image>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </FadeInView>
                </View>
            </ScrollView>
        );
    }
    onScrollAnimationEnd(e) {
        //求当前页码:通过屏幕偏移量/屏幕宽度
        var currentPage = Math.floor(e.nativeEvent.contentOffset.x / 390 + 0.4);
        //更新状态机
        this.setState({
            activePage: currentPage
        });
    }

}


const styles = StyleSheet.create({
    container: {
        flex: 1,

        backgroundColor: '#e3e3e3',
    },
    header: {
        backgroundColor: '#f892ac',
        flexDirection: 'row',
        height: 60,
        alignItems: 'center',
        justifyContent: 'center',
        borderBottomLeftRadius: 50,
        borderBottomRightRadius: 50
    },
    picStyle: {
        width: 30,
        height: 30,
        position: 'absolute',
        top: 15,
        right: 20,

    },
    itemStyle: {
        flexDirection: 'row',
        backgroundColor: 'white',
        justifyContent: 'space-between',
        height: 100,
        alignItems: 'center',
        borderBottomColor: '#e3e3e3',
        marginLeft: 10,
        marginRight: 10,
        marginTop: 10,
        borderRadius: 20

    },
    intStyle: {
        flexDirection: 'row',
        backgroundColor: 'white',
        justifyContent: 'space-between',
        height: 180,
        alignItems: 'center',
        borderBottomColor: '#ffffff',
        marginTop: 10,
        marginLeft: 10,
        marginRight: 10,
        borderRadius: 20,
        elevation: 4

    },
    int: {
        flexDirection: 'row',
        backgroundColor: 'white',    
        height: 280,
        alignItems: 'center',
        borderBottomColor: '#ffffff',
        marginTop: 10,
        marginLeft: 10,
        marginRight: 10,
        borderRadius: 20,
        elevation: 4,
        flexDirection: 'column', 
        alignItems: 'center',
        justifyContent: 'center'

    },
    imgT: {
        marginLeft: 20,
        width: 290,

        flexDirection: 'row',
        justifyContent: 'flex-start'
    },
    itemStyle: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        height: 80,
        alignItems: 'center',
        borderColor: '#eee',
        borderWidth: 1

    },
    bottom2: {
        marginTop: 10,
        backgroundColor: '#fff',
        height: 400,

    },
    bottom1: {
        marginTop: 10,
        backgroundColor: '#fff',
        height: 160,
    },

    modelStyle: {
        width: 100,
        height: 300,
        backgroundColor: '#388fff',
        borderWidth: 1,
        borderRadius: 5,
        marginTop: 50,
        opacity: 0.5
    },

    flex: {
        flex: 1,

    },
    input: {
        height: 50,
        width: 300,
        borderWidth: 1,
        marginTop: 10,
        marginRight: 2,
        backgroundColor: '#ffffff',
        borderColor: '#e3e3e3',
        borderRadius: 10,
        elevation: 1
    },

    btn: {
        width: 75,
        height: 45,
        color: 'white',
        backgroundColor: '#37c5b7',
        marginTop: 20,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
        color: 'white'
    },
});